import React from 'react'


import store from './store'
import { getAddItemAction, getRemoveItemAction, getChangeValueAction, getInitTodoListAction } from './store/actioncreator'

import axios from 'axios'

import AppUI from './AppUI'

export default class App extends React.Component {

  constructor (props) {
    super(props)
    // console.log(store.getState())

    this.state = store.getState()
    store.subscribe(() => {
      this.setState(store.getState())
    })
    
    this.changeInput = this.changeInput.bind(this)
    this.addItem = this.addItem.bind(this)
    this.removeItem = this.removeItem.bind(this)
  }

  render () {
    return <AppUI 
      value={this.state.value}
      changeInput={this.changeInput}
      addItem={this.addItem}
      todolist={this.state.todolist}
      removeItem={this.removeItem}
    />
  }

  changeInput (e) {
    const actions = getChangeValueAction(e.target.value)
    store.dispatch(actions)
  }

  addItem () {
    const actions = getAddItemAction()
    store.dispatch(actions)
  }

  removeItem (item) {
    console.log(item)
    const actions = getRemoveItemAction(item)
    store.dispatch(actions)
  }

  async componentDidMount () {
    const { data } = await axios.get('http://epg.mms.cloudgather.net:8000//restApi/getVodListByTypeId?TYPEID=1405457301925531649&LENGTH=5&STATION=0')
    const list = data.data.map(item => item.name)
    const actions = getInitTodoListAction(list)
    store.dispatch(actions)
  }

}